<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <img src="./imgs/大海001.jpg" alt="111" class = "myImg"/>
    <div class="del-icon"></div>
</div>

<style>
    .box {
        width: 400px;
        height: 300px;
        border: 3px solid blue;
        margin: 100px auto;
        overflow: hidden;
        display: flex;
        position: relative;
    }

    .box img {
        object-fit: cover;
    }

    .del-icon {
        position: absolute;
        width: 50px;
        height: 50px;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        background: blue;
        display:none;
    }

    .box:hover .del-icon{
        cursor: pointer;
        display:block;
    }
</style>
</body>
</html>
